<template>
  <main class="main-container">
    <DeviceSearchBar />
    <el-scrollbar class="config-container">
      <el-table :data="deviceStore.currentConfigs" style="width: 100%">
        <el-table-column fixed prop="ipAddress" label="IpAddress" />
        <el-table-column prop="port" label="Port" />
        <el-table-column prop="deviceName" label="DeviceName" />
        <el-table-column prop="deviceType" label="DeviceType" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="deleteRow(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="mt-4" style="width: 100%" @click="onOpenAddItemDialog">
        添加配置
      </el-button>
    </el-scrollbar>
    <el-dialog
      v-model="showAddItemDialog"
      title="添加新设备配置"
      width="400"
      :close-on-click-modal="false"
      draggable
    >
      <DeviceConfigItem
        style="margin: 10px"
        v-model:deviceName="newDeviceConfig.deviceName"
        v-model:port="newDeviceConfig.port"
        v-model:deviceType="newDeviceConfig.deviceType"
        v-model:ipAddress="newDeviceConfig.ipAddress"
      ></DeviceConfigItem>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button type="primary" @click="onAddNewItem">添加</el-button>
      </div>
    </el-dialog>
  </main>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDeviceManagerStore } from "@/store/device/manager";
import DeviceSearchBar from "@/components/device/device-search-bar.vue";
import DeviceConfigItem from "@/components/device/device-config-item.vue";
import type { DeviceConfig } from "@/types/device";
import { DeviceTyeps } from "@/types/device";
import { ElMessage } from "element-plus";

const deviceStore = useDeviceManagerStore();
const showAddItemDialog = ref(false);
let newDeviceConfig = ref<DeviceConfig>({
  deviceName: "",
  port: null,
  deviceType: DeviceTyeps.SiemensS1500,
  ipAddress: "",
});

const deleteRow = (index: number) => {
  // 删除设备配置
  deviceStore.removeConfigFromCurrentNode(index);
};

const onOpenAddItemDialog = () => {
  showAddItemDialog.value = true;
};

const onAddNewItem = () => {
  let deviceConfigItem = newDeviceConfig.value;
  var reg = new RegExp("^[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}$");

  if (deviceConfigItem.deviceName.length < 6) {
    ElMessage.error("设备逻辑名长度不能低于6个字符！");
  } else if (reg.test(deviceConfigItem.ipAddress) == false) {
    ElMessage.error("IP 地址格式不正确！");
  } else if (deviceConfigItem.port < 1 || deviceConfigItem.port > 65535) {
    ElMessage.error("IP 端口无效（0~65535）！");
  } else {
    // 添加一个新的设备配置
    deviceStore.addConfigToCurrentNode(deviceConfigItem);
    // 重新初始化对象
    newDeviceConfig.value = {
      deviceName: "",
      port: null,
      deviceType: DeviceTyeps.SiemensS1500,
      ipAddress: "",
    };
    // 关闭弹窗
    showAddItemDialog.value = false;
  }
};
</script>

<style scoped>
.main-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.config-container {
  height: 100%;
  padding: 20px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-top: 10px;
  border-radius: 5px;
}

.collapse-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>
